import { Component } from '@angular/core';
import { FieldItem } from '@iux/live';

@Component({
  templateUrl: './basic.component.html',
})
export class BasicComponent {
  public treeData = [
    {
      label: 'Documents',
      children: [
        {
          label: 'Expenses.doc',
          isLeaf: true,
        },
        {
          label: 'Resume.doc',
          isLeaf: true,
        },
      ],
    },
    {
      label: 'Word',
      children: [
        {
          label: 'Expenses.doc',
          isLeaf: true,
        },
        {
          label: 'Resume.doc',
          isLeaf: true,
        },
      ],
    },
    {
      label: 'Pictures',
      children: [
        {
          label: 'logo.png',
          isLeaf: true,
        },
        {
          label: 'banner.pnd',
          isLeaf: true,
        },
      ],
    },
  ];
  public fields: FieldItem[] = [
    {
      label: 'Status',
      field: 'status',
      type: 'single',
      defaultValue: 'creating',
      option: {
        items: [
          {
            label: 'Normal',
            value: 'normal',
          },
          {
            label: 'Error',
            value: 'error',
          },
          {
            label: 'Creating',
            value: 'creating',
          },
          {
            label: 'Mapping',
            value: 'mapping',
          },
          {
            label: 'Unmapping',
            value: 'unmapping',
          },
          {
            label: 'Deleting',
            value: 'deleting',
          },
          {
            label: 'Expanding',
            value: 'expanding',
          },
        ],
      },
    },
    {
      label: 'Checker',
      field: 'checker',
      type: 'multiple',
      defaultValue: ['Jack', 'Tom'],
      option: {
        items: [
          {
            label: 'Jack',
            value: 'Jack',
          },
          {
            label: 'Tom',
            value: 'Tom',
          },
          {
            label: 'Jerry',
            value: 'Jerry',
          },
          {
            label: 'Mary',
            value: 'Mary',
          },
          {
            label: 'Ada',
            value: 'Ada',
          },
          {
            label: 'Clara',
            value: 'Clara',
          },
          {
            label: 'Alberta',
            value: 'Alberta',
          },
          {
            label: 'Agatha',
            value: 'Agatha',
          },
        ],
        lvShowCheckAll: true,
        lvShowFilter: true,
      },
    },
    {
      label: 'Commit Number',
      field: 'commitNumber',
      type: 'numberRange',
    },
    {
      label: 'Issue Number',
      field: 'issueNumber',
      type: 'number',
    },
    {
      label: 'Release Version',
      field: 'releaseVersion',
      type: 'textInput',
      mode: 'startsWith',
    },
    {
      label: 'Date',
      field: 'dateSelection',
      type: 'datePicker',
      option: {
        lvPickerMode: 'date',
        lvShowTodayButton: true,
      }
    },
    {
      label: 'Date Range',
      field: 'dateRange',
      type: 'dateRangePicker',
      mode: 'rangeIn',
      defaultValue: [new Date('2020-06-10'), new Date('2020-12-20')],
    },
    {
      label: 'Tree Single',
      field: 'treeSingle',
      type: 'treeSingle',
      defaultValue: [this.treeData[0]],
      option: {
        lvData: this.treeData,
      }
    },
    {
      label: 'Tree Multiple',
      field: 'treeMultiple',
      type: 'treeMultiple',
      option: {
        lvData: this.treeData,
        lvShowCheckbox: true,
      }
    }
  ];

  onChange({ selectedFilters, currentFilter }): void {
    console.log('filters:', selectedFilters);
    console.log('currentFilter:', currentFilter);
  }
}
